<template>
  <el-card shadow="never">
    <el-row :gutter="20">
      <el-col ref="box" :span="14" :offset="5">
        <face-detector width="640" height="480" />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import FaceDetector from '@/components/FaceDetector'

export default {
  components: {
    FaceDetector
  },
  created() {},
  mounted() {},
  methods: {
    turnOnOrOffCamera() {
      // if (!this.$refs['video'].srcObject) {
      //   navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
      //     console.log(stream)
      //     this.$refs['video'].srcObject = stream
      //     this.$refs['video'].play()
      //   })
      // } else {
      //   const stream = this.$refs['video'].srcObject
      //   const tracks = stream.getTracks()
      //   tracks.forEach(track => {
      //     track.stop()
      //   })
      //   this.$refs['video'].srcObject = null
      // }
    },
    async detect() {
      // if (!this.model) {
      //   this.model = await blazeface.load()
      // }
      // const returnTensors = false
      /*
      `predictions` is an array of objects describing each detected face, for example:

      [
        {
          topLeft: [232.28, 145.26],
          bottomRight: [449.75, 308.36],
          probability: [0.998],
          landmarks: [
            [295.13, 177.64], // right eye
            [382.32, 175.56], // left eye
            [341.18, 205.03], // nose
            [345.12, 250.61], // mouth
            [252.76, 211.37], // right ear
            [431.20, 204.93] // left ear
          ]
        }
      ]
      */
      // const predictions = await this.model.estimateFaces(
      //   document.querySelector('img'),
      //   returnTensors
      // )
      // if (predictions.length > 0) {
      //   for (let i = 0; i < predictions.length; i++) {
      //     const start = predictions[i].topLeft
      //     const end = predictions[i].bottomRight
      //     const size = [end[0] - start[0], end[1] - start[1]]
      //     console.log(start[0], start[1], size[0], size[1])
      //     // Render a rectangle over each detected face.
      //     // ctx.fillRect(start[0], start[1], size[0], size[1])
      //   }
      // }
    }
  }
}
</script>
